<template>
  <div>
    <el-dialog
      title="配置分销方"
      :visible.sync="dialogVisible"
      width="25%"
      :before-close="handleClose"
    >
      <div>
        <el-form
          ref="ruleForm"
          :model="ruleForm"
          :rules="rules"
          class="demo-ruleForm"
          label-position="top"
        >
          <el-form-item
            label="分销方"
            prop="distributor_ids"
          >
            <el-select
              v-model="ruleForm.distributor_ids"
              style="width: 100%;"
              multiple
              filterable
              collapse-tags
              clearable
            >
              <el-option
                v-for="item in distributor_ids"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item
            label="批量添加短剧"
            prop="playlet_ids"
          >
            <el-select
              v-model="ruleForm.playlet_ids"
              style="width: 100%;"
              :remote-method="onGetPlayLet"
              filterable
              remote
              multiple
              collapse-tags
              clearable
            >
              <el-option
                v-for="item in playLet"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>

        </el-form>
      </div>
      <div
        slot="footer"
        class="dialog-footer"
      >
        <el-button @click="handleClose">取 消</el-button>
        <el-button
          :loading="loading"
          type="primary"
          @click="onSubmit"
        >确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { commonData } from '@/api/common'
import { addDistributor, batchDistributor } from '@/api/content'
export default {
  data() {
    return {
      loading: false,
      dialogVisible: true,
      ruleForm: {
        distributor_ids: []
      },
      rules: {
        distributor_ids: [{ required: true, message: '请选择分销方', trigger: 'change' }],
        playlet_ids: [{ required: true, message: '请选择短剧', trigger: 'blur' }]
      },
      distributor_ids: [],
      playLet: []
    }
  },
  mounted() {
    this.onGetDistributor()
    this.onGetPlayLet()
  },
  methods: {
    async onGetDistributor() {
      const res = await commonData({ type: 'distributor' })
      if (res.status_code === 1) {
        this.distributor_ids = res.data.data
      }
    },
    async onGetPlayLet(query) {
      const res = await commonData({ type: 'playlet', value: query })
      if (res.status_code === 1) {
        this.playLet = res.data.data
      }
    },
    handleClose() {
      this.$emit('coles')
    },
    onSubmit() {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          this.loading = true
          batchDistributor(this.ruleForm)
            .then((res) => {
              this.loading = false
              this.$message.success('批量配置分销方成功')
              this.$emit('ok')
            })
            .catch(() => {
              this.loading = false
            })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep.dialog-footer {
  width: 100%;
}
.title {
  font-family: PingFangSC, PingFang SC;
  font-weight: 400;
  font-size: 14px;
  color: #1d2129;
  line-height: 32px;
  text-align: left;
  font-style: normal;
}
::v-deep .el-dialog__footer {
  padding: 0;
}
</style>